<template>
  <el-dialog title="分配权限" :visible="showDialog" width="50%" @close="btnCancel">
    <el-tree
      ref="permTree"
      :data="permData"
      show-checkbox
      check-strictly
      node-key="id"
      default-expand-all
      :props="defaultProps"
      :default-checked-keys="selectChecks">
    </el-tree>

    <span slot="footer" class="dialog-footer">
    <el-button @click="btnCancel">取 消</el-button>
    <el-button type="primary" @click="btnOk">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>

  import {assignPerm, getRoleDetail} from "@/api/setting";
  import {getPermissionList} from "@/api/permission";
  import {transListToTreeData} from "@/utils";

  export default {
    name: "assign-role",
    props: {
      showDialog: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        permData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        selectChecks: [],
        id: ''
      }
    },
    methods: {
      async btnOk() {
        await assignPerm({id: this.id, permIds: this.$refs.permTree.getCheckedKeys()})
        this.$emit('update:showDialog', false)
        this.$message.success('分配权限成功')
      },
      btnCancel() {
        this.$emit('update:showDialog', false)
        this.selectChecks=[]
      },
      async getPermissionList(id) {
        this.id = id
        const data = await getPermissionList()
        this.permData = transListToTreeData(data, '0')

        const {permIds} = await getRoleDetail(id)
        this.selectChecks = permIds
      }
    }

  }
</script>

<style scoped>

</style>
